<template>
	<!-- 轮播 -->
	<view class="banner_swiper_box mb20">
		<view class="banner_bg_swiper">
			<transition name="fade">
				<swiper class="swiper_bg_box" circular skip-hidden-item-layout vertical :autoplay="true" interval="3030">
					<swiper-item v-for="(item, index) in banner_bg" :key="index" class="carousel_bg_item">
						<view class="swiper_bg_item">
							<image class="swiper_bg_img " :src="item.image" mode="widthFix" lazy-load></image>
						</view>
					</swiper-item>
				</swiper>
			</transition>
		</view>
		<view class="banner_img_swiper">
			<swiper class="swiper_pic_box" skip-hidden-item-layout circular @change="swiperChange" :autoplay="true" interval="3000">
				<swiper-item v-for="(item, index) in banner_pic" :key="index" class="carousel_pic_item">
					<view class="swiper_pic_item">
						<image class="swiper_pic_img " :src="item.image" mode="widthFix" lazy-load></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="banner-swiper-dots x-f">
			<view class="dot-cur dot-wrap">{{ swiperCurrent + 1 }}</view>
			<view class="dot-break dot-wrap">/</view>
			<view class="dot-total dot-wrap">{{ banner_pic.length }}</view>
		</view>
	</view>
</template>

<script>
/**
 * 自定义之轮播卡片
 * @property {Object} detail - 轮播信息
 */
export default {
	components: {},
	data() {
		return {
			swiperCurrent: 0, //轮播下标
			routerTo: this.$tools.routerTo
		}
	},
	props: {
		banner_pic: {
			type: Array,
			default: null
		},
		banner_bg: {
			type: Array,
			default: null
		},
	},
	computed: {},
	created() {},
	methods: {
		
		// 轮播切换
		swiperChange(e) {
			this.swiperCurrent = e.detail.current
			this.$emit('get_banner_index',e.detail.current)
		},
		// 路由跳转
		jump(path, parmas) {
			this.$Router.push({
				path: path,
				query: parmas
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.banner_swiper_box {
	width: 100%;
	height: 500rpx;
	position: relative;
}
.banner_bg_swiper{
	width: 100%;
	height: 500rpx;
	.swiper_bg_box {
		width: 100%;
		height: 500rpx;
		overflow: hidden;
		.carousel_bg_item {
			width: 100%;
			height: 500rpx;
			overflow: hidden;
			border-bottom-left-radius: 20rpx;
			border-bottom-right-radius: 200rpx;
			.swiper_bg_item{
				width: 100%;
				height: 500rpx;
				.swiper_bg_img{
					width: 100%;
					height: 100%!important;
				}
			}
		}
	}
}
.banner_img_swiper{
	width: 95%;
	height:240rpx;
	position: absolute;
	left: 0%;
	right: 0;
	bottom: 0;
	margin: auto;
	overflow: hidden;
	border-radius: 20rpx;
	.swiper_pic_box {
		width: 100%;
		height: 240rpx;
		overflow: hidden;
		.carousel_pic_item {
			width: 100%;
			height: 240rpx;
			overflow: hidden;
			border-radius: 20rpx;
			.swiper_pic_item{
				width: 100%;
				height: 240rpx;
				.swiper_pic_img{
					width: 100%;
					height: 100%!important;
				}
			}
		}
	}
}

.banner-swiper-dots {
	display: flex;
	position: absolute;
	right: 40rpx;
	bottom: 26rpx;
	z-index: 66;
	background-color: rgba(#000, 0.3);
	padding: 0 14rpx;
	border-radius: 30rpx;
	line-height: 30rpx;
	.dot-wrap {
		font-size: 20rpx;
		font-weight: 500;
		color: #ffffff;
		margin: 0 2rpx;
	}
}
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active 在 <2.1.8 版本中使用 */ {
  opacity: 0;
}
</style>
